<template>
	<page-body>
		<view class="page">
			<view class="flex benben-position-layout flex flex-wrap align-center MyPortrayal_flex_0"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex flex-wrap align-center justify-between flex-sub MyPortrayal_fd0_0'>
					<view class='flex flex-wrap align-center MyPortrayal_fd0_0_c0'>
						<text class='fu-iconfont2  MyPortrayal_fd0_0_c0_c0' @tap.stop="handleJumpDiy" data-type="back"
							data-url="1">&#xE794;</text>
					</view>
					<view class='flex flex-wrap align-stretch justify-center'>
						<text class='MyPortrayal_fd0_0_c1_c0'>{{$t('我的画像')}}</text>
					</view>
					<view class='flex flex-wrap align-center justify-end MyPortrayal_fd0_0_c0'>
					</view>
				</view>

			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
			<!---flex布局flex布局开始-->
			<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout MyPortrayal_flex_1">
				<view class='flex flex-wrap align-center justify-between'>
					<view class='flex flex-wrap align-center'>

						<view class='flex  MyPortrayal_fd1_0_c0_c0'></view>

						<text class='MyPortrayal_fd1_0_c0_c1'>{{$t('个人信息')}}</text>
					</view>
					<view class='flex flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="navigateTo"
						:data-url="`/pages/Mymine/Mydata/Mydata`">
						<text class='MyPortrayal_fd1_0_c1_c0'>{{$t('更多')}}</text>
						<image class='MyPortrayal_fd1_0_c1_c1' mode="aspectFit" :src='STATIC_URL+"1618.png"'></image>
					</view>
				</view>
				<view class='flex flex-direction flex-wrap align-stretch MyPortrayal_fd1_1'>
					<view class='flex flex-wrap align-center justify-center MyPortrayal_fd1_1_c0'>
						<text v-if="meinfo.baseclass_name"
							class='MyPortrayal_fd1_1_c0_c0'>{{meinfo.baseclass_name}}</text>
						<image v-if="meinfo.avatar" class='MyPortrayal_fd1_1_c0_c1' mode="aspectFill"
							:src='meinfo.avatar'></image>
						<text v-if="meinfo.political_status_name"
							class='MyPortrayal_fd1_1_c0_c2'>{{meinfo.political_status_name}}</text>
						<text v-if="meinfo.degree_name" class='MyPortrayal_fd1_1_c0_c3'>{{meinfo.degree_name}}</text>
						<text v-if="meinfo.degree" class='MyPortrayal_fd1_1_c0_c4'>{{meinfo.degree}}</text>
						<text v-if="meinfo.basemajor_name"
							class='MyPortrayal_fd1_1_c0_c5'>{{meinfo.basemajor_name}}</text>
					</view>
					<view class='flex flex-wrap align-center justify-center MyPortrayal_fd1_1_c1'>
						<text v-if="meinfo.real_name" class='MyPortrayal_fd1_1_c1_c0'>{{meinfo.real_name}}</text>
						<image class='MyPortrayal_fd1_1_c1_c1' mode="aspectFit" :src='STATIC_URL+"1619.png"'
							v-if=" meinfo.gender=='2'"></image>
						<image class='MyPortrayal_fd1_1_c1_c1' mode="aspectFit" :src='STATIC_URL+"1620.png"'
							v-if=" meinfo.gender=='1'"></image>
					</view>
				</view>
				<view class='flex flex-wrap align-center justify-between MyPortrayal_fd1_2' v-if="false">
					<view class='flex flex-wrap align-center'>

						<view class='flex  MyPortrayal_fd1_0_c0_c0'></view>

						<text class='MyPortrayal_fd1_0_c0_c1'>学情分析</text>
					</view>
				</view>
				<view class='flex flex-wrap align-center justify-between MyPortrayal_fd1_3' v-if="false">
					<view class='flex flex-direction align-center justify-between MyPortrayal_fd1_3_c0'>
						<view class='flex flex-wrap align-center'>
							<text class='MyPortrayal_fd1_3_c0_c0_c0'>9</text>
							<text class='MyPortrayal_fd1_3_c0_c0_c1'>/</text>
							<text class='MyPortrayal_fd1_3_c0_c0_c1'>41</text>
						</view>
						<view class='flex flex-wrap align-center'>
							<text class='MyPortrayal_fd1_3_c0_c1_c0'>{{$t('课堂表现排名')}}</text>
						</view>
					</view>
					<view class='flex flex-direction align-center justify-between MyPortrayal_fd1_3_c0'>
						<view class='flex flex-wrap align-center'>
							<text class='MyPortrayal_fd1_3_c0_c0_c0'>11</text>
							<text class='MyPortrayal_fd1_3_c0_c0_c1'>/</text>
							<text class='MyPortrayal_fd1_3_c0_c0_c1'>41</text>
						</view>
						<view class='flex flex-wrap align-center'>
							<text class='MyPortrayal_fd1_3_c0_c1_c0'>{{$t('综合成绩排名')}}</text>
						</view>
					</view>
				</view>
				<view class='flex flex-wrap align-center MyPortrayal_fd1_4_ben' v-if="false">
					<view class=" MyPortrayal_fd1_4_c0_ben">
						<qiun-data-charts :canvas2d='true' :reshow='true' :chartData="chartsOptsfd1_4_c0"
							:ontouch='true' chart-type='10' type='radar' :opts='chartsOptsfd1_4_c0' />
						<!-- <qiun-data-charts :canvas2d='true' :reshow='true' :chartData="chartsOptsfd1_4_c0"
							:ontouch='true' chart-type='10' type='radar' :opts='chartsOptsfd1_4_c0' /> -->
					</view>
				</view>

				<!-- <view class='flex flex-wrap align-center MyPortrayal_fd1_4'> -->
				<!-- <view class=" MyPortrayal_fd1_4_c0">
						<qiun-data-charts :canvas2d='true' :reshow='true' :chartData="chartsOptsfd1_4_c0"
							:ontouch='true' chart-type='10' type='radar' :opts='chartsOptsfd1_4_c0' />
					</view> -->
				<!-- </view> -->
				<!-- <view class='flex flex-wrap align-center MyPortrayal_fd1_4'> -->
				<view class=" MyPortrayal_fd1_4_c0" v-if="false">
					<qiun-data-charts :canvas2d='true' :reshow='true' :chartData="chartsOptsfd1_5_c0" :ontouch='true'
						chart-type='5' type='line' :opts='chartsOptsfd1_5_c0' />
				</view>
				<!-- </view> -->
				<view class='flex flex-wrap align-center justify-between MyPortrayal_fd1_6'>
					<view class='flex flex-wrap align-center'>

						<view class='flex  MyPortrayal_fd1_0_c0_c0'></view>

						<text class='MyPortrayal_fd1_0_c0_c1'>{{$t('为你推荐')}}</text>
					</view>
				</view>
				<view class='flex flex-direction align-stretch MyPortrayal_fd1_7'>
					<view>
						<benben-flex-tabs class-name='MyPortrayal_benbenTabsfd1_7_c0' v-model="tabsVal"
							ref="benben_tabsfd1_7_c0" select-mark="benben_tabsfd1_7_c0" key="benben_tabsfd1_7_c0"
							:open-title-type='false' :open-sticky='true' :top='0' :is-show-content='false'
							:scrollspy='false' :tabs-info.sync="tabsInfofd1_7_c0" @change="ChangeTabsFunc()">

							<scroll-view @scroll="tabsInfofd1_7_c0.scrollX = $event.detail.scrollLeft"
								id="benben_tabsfd1_7_c0" class="benben-tabs" style="width:600rpx" :scroll-x="true"
								:scroll-left="tabsInfofd1_7_c0.moveX" scroll-with-animation="all .3s ease">
								<view class="benben-tabs-content" id="benben_tabsfd1_7_c0-content">
									<view id="benben_tabsfd1_7_c0-title"
										class="benben-tabs-title flex flex align-center justify-around">
										<template v-for='(item,key0) in tabs'>
											<view :key='key0'
												:class="{ 'checkTitlefd1_7_c0': tabsVal == item.value, 'flex flex-wrap align-center': true }"
												@tap="tabsVal = item.value"
												:id="`benben_tabsfd1_7_c0-title-item-${item.value}`">

												<text>{{item.name}}</text>

											</view>
										</template>
									</view>
									<view
										:style="{ left: tabsInfofd1_7_c0.lineleft, maxWidth: tabsInfofd1_7_c0.lineWidth ,}"
										id="benben_tabsfd1_7_c0-line"
										class="benben-tabs-line flex benben-flex-tabs-line MyPortrayal_linefd1_7_c0"
										:class="{'benben-tabs-line-active':tabsInfofd1_7_c0.isInit}"></view>
								</view>
							</scroll-view>

						</benben-flex-tabs>

					</view>
					<!-- AI综合分析 -->
					<view class='flex flex-direction flex-wrap align-stretch MyPortrayal_fd1_1_c1' v-if=" tabsVal=='1'">
						<view class='flex flex-direction align-center justify-around MyPortrayal_fd1_7_c1_c0'
							v-if="percent!==100 && !textStr">
							<view class='flex flex-wrap align-center'>
								<text class='MyPortrayal_fd1_7_c1_c0_c0_c0'>{{percent}}</text>
								<text class='MyPortrayal_fd1_7_c1_c0_c0_c1'>%</text>
							</view>
							<view class='flex flex-wrap align-center'>
								<view class='flex benben-progress-bar MyPortrayal_fd1_7_c1_c0_c1_c0'>
									<view class='benben-progress-bar-center MyPortrayal_progress1_fd1_7_c1_c0_c1_c0'
										:style="{width: percent+'%'}"></view>

								</view>
							</view>
							<view class='flex flex-wrap align-center'>
								<text class='MyPortrayal_fd1_7_c1_c0_c2_c0'>{{$t('AI分析中…')}}</text>
							</view>
						</view>
						<view class='flex flex-wrap align-center MyPortrayal_fd1_7_c1_c1' v-else>
							<view v-html="textStr"></view>
						</view>
					</view>
				</view>
			</view>

			<!---推荐资料-->
			<view class="flex benben-flex-layout flex-wrap align-center" v-if=" tabsVal=='2'">
				<template v-for='(item,key0) in datum'>
					<view class='flex flex-wrap align-center justify-between classhourPar_fd2_5_c0' :key='item.aid'>
						<view class='flex flex-wrap align-center'>
							<image class='classhourPar_fd2_5_c0_c0_c0' mode="aspectFit" :src='STATIC_URL+"1610.png"'>
							</image>
							<text class='classhourPar_fd2_5_c0_c0_c1'>{{item.name}}.mp4</text>
						</view>
						<button class='classhourPar_fd2_5_c0_c1'
							@tap="seePdf(item.file_path,item.aid,item)">{{$t('查看')}}</button>
					</view>
				</template>

			</view>

			<!---flex布局flex布局结束-->
			<!---flex布局flex布局开始-->
			<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout" v-if=" tabsVal=='3'">
				<view class='flex flex-wrap align-center justify-between MyPortrayal_fd3_0'>
					<template v-for='(item,key0) in Course'>
						<view class='flex flex-direction flex-wrap align-center justify-between MyPortrayal_fd3_0_c0'
							@tap.stop="handleJumpDiy" data-type="navigateTo"
							:data-url="`/pages/kc/kcdetail/kcdetail?course=${item.aid}`" :key='key0'>
							<image class='MyPortrayal_fd3_0_c0_c0' mode="aspectFill" :src='item.cover'></image>
							<view class='flex flex-direction flex-wrap align-stretch flex-sub MyPortrayal_fd3_0_c0_c1'>
								<text class='MyPortrayal_fd3_0_c0_c1_c0'>{{item.courseplan_name}}</text>
								<!-- <view class='flex flex-wrap align-center'>
									<text class='MyPortrayal_fd3_0_c0_c1_c1_c0'>{{$t('共')}}</text>
									<text class='MyPortrayal_fd3_0_c0_c1_c1_c1'>{{item.class_period}}</text>
									<text class='MyPortrayal_fd3_0_c0_c1_c1_c0'>{{$t('课时')}}</text>
								</view> -->
							</view>
						</view>
					</template>
					<fu-empty :pagingListLoadedAll="pagingListLoadedAll" :pagingListNoListData="pagingListNoListData"
						:listDataLength="listDataLength" :isLoadInit="isLoadInit"></fu-empty>
				</view>
			</view>
			<!---flex布局flex布局结束-->
		</view>
	</page-body>
</template>
<script>
	import pagingList from '@/common/mixin/paging_list.js';
	import {
		mdToHtml
	} from '@/common/utils/mdParser.js'
	import {
		validate
	} from '@/common/utils/validate.js'

	export default {
		components: {},
		mixins: [pagingList],
		data() {
			return {
				datum: [],
				percent: 0,
				"tabsInfofd1_7_c0": {
					lineleft: '',
					lineWidth: '',
					moveX: 0,
					scrollX: 0,
					PageScrollX: 0,
					isInit: false
				},
				"chartsOptsfd1_4_c0": {
					"categories": ["出勤率", "老师点评", "课后反思", "课堂互动"],
					"series": [{
						"name": "成绩1",
						"data": [90, 110, 165, 195, 100],
					}],
					//   }],
					"color": ["#145EFD"],
					"dataLabel": {
						"normal": {
							"color": '#ddd', // 设置文字颜色为红色
							"show": 'true' // 显示文字
						}
					},
					"padding": [5, 5, 5, 5],
					// "dataLabel": true,
					"enableScroll": false,
					"legend": {
						"show": false,
						"position": "right",
						"lineHeight": 25
					},
					"extra": {
						"radar": {
							"gridType": "radar",
							"gridColor": "#CCCCCC",
							"gridCount": 3,
							"opacity": 0.2,
							"max": 200,
							"labelShow": true,
							"border": true
						}
					}
				},
				"chartsOptsfd1_5_c0": {
					"categories": ["计算级网络", "毛泽东思想和中国特色...", "马克思主义基本原理", "中国近代史纲要", "思想道德与法制"],
					"series": [{
						"name": "成绩",
						"data": [67, 87, 81, 87, 81]
					}],
					"padding": [15, 10, 0, 15],
					"enableScroll": false,
					"legend": [],
					"xAxis": {
						"disableGrid": true,
						"rotateLabel": true, // ✅ 必须加上这一行，启用旋转
						"labelAngle": 40
					},
					"yAxis": {
						"gridType": "dash",
						"dashLength": 2,
						"data": [{
							"min": 0,
							"max": 100
						}]
					},
					"extra": {
						"line": {
							"type": "curve",
							"width": 2,
							"activeType": "hollow"
						}
					}
				},
				"minixPagingListsApi": "",
				"pageingListApiMethod": "",
				"allowOnloadGetList": false,
				"tabs": [{
					"name": "AI综合分析",
					"value": "1",
					"image": ""
				}, {
					"name": "推荐资料",
					"value": "2",
					"image": ""
				}, {
					"name": "推荐课程",
					"value": "3",
					"image": ""
				}],
				"tabsVal": "1",
				"tabsLab": "",
				"meinfo": {
					"id": "",
					"nickname": "",
					"baseclass_name": "",
					"basemajor_name": "",
					"avatar": "",
					"real_name": "",
					"gender": "",
					"mobile": "",
					"birthday": "",
					"baseclass_grade": "",
					"political_status_name": "",
					"account": "",
					"basedept_name": "",
					"degree_name": "",
					"degree": ""
				},
				"Course": [],
				courseList: [90, 110, 165, 195, 187, 172], //课程成绩
				textStr: '',
			};
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo
			},
		},
		watch: {},
		onLoad(options) {
			this.getyr6f4cf3a2bf31Func()


			this.comprehensiveAnalysis()
			var s = setInterval(item => {
				if (this.percent <= 99) {
					this.percent++
				} else {
					clearInterval(s)
				}
			}, 150)
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			//AI分析
			async comprehensiveAnalysis() {
				//ai分析
				let res2 = await this.$api.post(global.apiUrls.post68c910fcdbef9, {
					agent_id:'62',
					query: `【${this.courseList}】，根据数据，请以一位老师的角度，给出该学生【${this.userInfo.real_name}】的详细分析及优化建议`
				})

				if (res2.data.code != 1) {
					this.$message.info(res2.data.msg);
					return
				} else {
					this.textStr = mdToHtml(res2.data.data.answer)
				}
			},

			//备课管理-获取课件列表
			async getrr68f99801dcf8Func() {
				//请求方法
				//数据验证

				let datadatum = await this.$api.get(global.apiUrls.post68d8a04db366c, {
					list_rows: 5
				});
				// 671754a87726a
				if (datadatum.data.code != 1) {
					this.$message.info(datadatum.data.msg);
					return
				}
				let infodatum = datadatum.data;
				this.datum = infodatum.data
				console.log("this.datum", this.datum)

			},
			//APP接口-获取我的课程
			getha6f224689e374Func() {
				this.minixPagingListsApi = global.apiUrls.post68c9345a8e5b8;
				this.pageingListApiMethod = 'get';
				this.allowOnloadGetList = false;
				this.pagingListPostDataContent = {}
				this.listData = [];
				this.Course = this.listData;
				this.pagingListToggle();

			},
			//tabs改变时
			ChangeTabsFunc() {
				if (this.tabsVal == '3') {
					this.getha6f224689e374Func()
				}
				let that = this
				if (this.tabsVal == "1") {
					// that.percent = 0

					// var s = setInterval(item => {
					// 	if (that.percent < 99) {
					// 		that.percent++
					// 	} else {
					// 		clearInterval(s)
					// 	}
					// }, Math.floor(Math.random() * (65 - 25 + 1)) + 25)
				}
				if (this.tabsVal == "2") {
					this.getrr68f99801dcf8Func()
				}
			},
			//APP接口-我的画像-个人信息
			async getyr6f4cf3a2bf31Func() {
				//请求方法
				//数据验证

				let datameinfo = await this.$api.get(global.apiUrls.post66f4cf3a2bf31, {

				});

				if (datameinfo.data.code != 1) {
					this.$message.info(datameinfo.data.msg);
					return
				}
				let infomeinfo = datameinfo.data;
				this.meinfo = infomeinfo.data

			},
			pagingListPostData() {
				return this.pagingListPostDataContent
			},
			seePdf(file, aid, item) {
				let _this = this;
				let id = aid;
				let url = file;
				console.log('。。。。。。。。。。。', url);



				window.open(url)

			},
		}
	};
</script>
<style lang="scss" scoped>
	.classhourPar_fd2_5_c0_c1 {
		background: rgba(20, 94, 253, .1);
		border-radius: 33rpx 33rpx 33rpx 33rpx;
		width: 96rpx;
		line-height: 48rpx;
		font-size: 24rpx;
		color: rgba(20, 94, 253, 1);
	}

	.classhourPar_fd2_5_c0_c0_c1 {
		color: #333;
		font-size: 28rpx;
		font-weight: 500;
		line-height: 40rpx;
		width: 430rpx;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.classhourPar_fd2_5_c0_c0_c0 {
		width: 40rpx;
		height: 40rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin: 0rpx 016rpx 0rpx 0rpx;
	}

	.classhourPar_fd2_5_c0 {
		background: var(--benbenbgColor1);
		padding: 32rpx 24rpx 024rpx 24rpx;
		margin: 0rpx 24rpx 24rpx 24rpx;
		border-radius: 32rpx;
		background-size: 100% auto;
		height: 104rpx;
		width: 100%;
	}

	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #F8F8F8;
		background-size: 100% auto;
	}

	.MyPortrayal_flex_0 {
		background: #fff;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.MyPortrayal_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 700;
		color: #333333;
		line-height: 50rpx;
	}

	.MyPortrayal_fd0_0_c0_c0 {
		font-size: 36rpx;
		color: #333;
	}

	.MyPortrayal_fd0_0_c0 {
		width: 120rpx;
	}

	.MyPortrayal_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
	}

	.MyPortrayal_flex_1 {
		padding: 24rpx;
	}

	.MyPortrayal_fd1_7_c1_c1_c0 {
		font-size: 24rpx;
		color: rgba(102, 102, 102, 1);
		font-weight: 400;
		line-height: 48rpx;
	}

	.MyPortrayal_fd1_7_c1_c1 {
		background: #f3f6f8;
		border-radius: 16rpx;
		background-size: 100% auto;
		padding: 24rpx;
	}

	.MyPortrayal_fd1_7_c1_c0_c2_c0 {
		font-size: 24rpx;
		color: #333;
		font-weight: 500;
		line-height: 33rpx;
	}

	.MyPortrayal_progress1_fd1_7_c1_c0_c1_c0 {
		background: rgba(20, 94, 253, 1);
		border-radius: 10rpx 10rpx 10rpx 10rpx;
	}

	.MyPortrayal_fd1_7_c1_c0_c1_c0 {
		border: 1px solid rgba(20, 94, 253, 0.1);
		background: rgba(20, 94, 253, 0.10);
		width: 300rpx;
		height: 20rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		background-size: 100% auto;
	}

	.MyPortrayal_fd1_7_c1_c0_c0_c1 {
		color: rgba(20, 94, 253, 1);
		font-size: 32rpx;
		font-weight: 700;
		line-height: 32rpx;
		text-decoration: none;
	}

	.MyPortrayal_fd1_7_c1_c0_c0_c0 {
		font-size: 48rpx;
		line-height: 56rpx;
		font-weight: 700;
		color: rgba(20, 94, 253, 1);
	}

	.MyPortrayal_fd1_7_c1_c0 {
		background: #f3f6f8;
		border-radius: 16rpx;
		background-size: 100% auto;
		padding: 24rpx;
		height: 286rpx;
	}

	.MyPortrayal_linefd1_7_c0 {
		background: #145efd;
		width: 50rpx;
		height: 8rpx;
		top: 80rpx;
		background-size: 100% auto !important;
		border-radius: 16rpx;
	}

	.checkTitlefd1_7_c0 {
		font-weight: 700 !important;
		font-size: 28rpx !important;
		color: #333 !important;
		background-color: rgba(255, 255, 255, 1) !important;
	}

	::v-deep .MyPortrayal_benbenTabsfd1_7_c0 {
		background: #fff;
		width: 100%;
		height: 90rpx;
		white-space: nowrap;
		text-align: center;
	}

	.MyPortrayal_fd1_7 {
		background: var(--benbenbgColor1);
		padding: 32rpx;
		border-radius: 24rpx;
		background-size: 100% auto;
		margin: 0rpx 0rpx 24rpx 0rpx;
		width: 100%;
	}

	.MyPortrayal_fd1_6 {
		margin: 0rpx 0rpx 24rpx 0rpx;
		width: 100%;
	}

	.MyPortrayal_fd1_4_c0 {
		background: #fff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		width: 100%;
	}

	.MyPortrayal_fd1_4 {
		background: var(--benbenbgColor1);
		padding: 32rpx;
		border-radius: 24rpx;
		background-size: 100% auto;
		// height: 522rpx;
		margin: 0rpx 0rpx 24rpx 0rpx;
		// width: 700rpx;
	}

	.MyPortrayal_fd1_3_c0_c1_c0 {
		color: rgba(102, 102, 102, 1);
		font-size: 28rpx;
		line-height: 48rpx;
	}

	.MyPortrayal_fd1_3_c0_c0_c1 {
		font-size: 28rpx;
		color: #333;
		line-height: 28rpx;
		font-weight: 700;
	}

	.MyPortrayal_fd1_3_c0_c0_c0 {
		font-size: 48rpx;
		line-height: 56rpx;
		color: #333;
		font-weight: 700;
	}

	.MyPortrayal_fd1_3_c0 {
		background: rgba(243, 246, 248, 1);
		width: 316rpx;
		height: 162rpx;
		background-size: 100% auto;
		border-radius: 16rpx;
		padding: 24rpx;
	}

	.MyPortrayal_fd1_3 {
		background: var(--benbenbgColor1);
		padding: 32rpx 24rpx 32rpx 24rpx;
		border-radius: 25rpx;
		background-size: 100% auto;
		margin: 0rpx 0rpx 24rpx 0rpx;
		width: 100%;
	}

	.MyPortrayal_fd1_2 {
		margin: 0rpx 0rpx 24rpx 0rpx;
	}

	.MyPortrayal_fd1_1_c1_c1 {
		width: 32rpx;
		height: 32rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin: 0rpx 0rpx 0rpx 16rpx;
	}

	.MyPortrayal_fd1_1_c1_c0 {
		color: #333;
		font-size: 32rpx;
		font-weight: 500;
		line-height: 45rpx;
	}

	.MyPortrayal_fd1_1_c1 {
		margin: 24rpx 0rpx 0rpx 0rpx;
	}

	.MyPortrayal_fd1_1_c0_c5 {
		border: 1px solid rgba(255, 255, 255, 1);
		background: rgba(255, 255, 255, .8);
		padding: 7rpx 24rpx 7rpx 24rpx;
		font-size: 28rpx;
		color: #333;
		font-weight: 400;
		line-height: 33rpx;
		border-radius: 32rpx;
		background-size: 100% auto;
		position: absolute;
		z-index: 5;
		top: -5rpx;
		left: 370rpx;
	}

	.MyPortrayal_fd1_1_c0_c4 {
		border: 1px solid rgba(255, 255, 255, 1);
		background: rgba(255, 255, 255, .8);
		padding: 7rpx 24rpx 7rpx 24rpx;
		font-size: 28rpx;
		color: #333;
		font-weight: 400;
		line-height: 33rpx;
		border-radius: 32rpx;
		background-size: 100% auto;
		position: absolute;
		z-index: 5;
		bottom: 157rpx;
		left: 450rpx;
	}

	.MyPortrayal_fd1_1_c0_c3 {
		border: 1px solid rgba(255, 255, 255, 1);
		background: rgba(255, 255, 255, .8);
		padding: 7rpx 24rpx 7rpx 24rpx;
		font-size: 28rpx;
		color: #333;
		font-weight: 400;
		line-height: 33rpx;
		border-radius: 32rpx;
		background-size: 100% auto;
		position: absolute;
		z-index: 5;
		bottom: 37rpx;
		left: 410rpx;
	}

	.MyPortrayal_fd1_1_c0_c2 {
		border: 1px solid rgba(255, 255, 255, 1);
		background: rgba(255, 255, 255, .8);
		padding: 7rpx 24rpx 7rpx 24rpx;
		font-size: 28rpx;
		color: #333;
		font-weight: 400;
		line-height: 33rpx;
		border-radius: 32rpx;
		background-size: 100% auto;
		position: absolute;
		z-index: 5;
		left: 36rpx;
		bottom: 79rpx;
	}

	.MyPortrayal_fd1_1_c0_c1 {
		width: 320rpx;
		height: 320rpx;
		border-radius: 160rpx;
	}

	.MyPortrayal_fd1_1_c0_c0 {
		border: 1px solid rgba(255, 255, 255, 1);
		background: rgba(255, 255, 255, .8);
		padding: 7rpx 24rpx 7rpx 24rpx;
		font-size: 28rpx;
		color: #333;
		font-weight: 400;
		line-height: 33rpx;
		border-radius: 32rpx;
		background-size: 100% auto;
		position: absolute;
		z-index: 5;
		top: 51rpx;
		left: 25rpx;
	}

	.MyPortrayal_fd1_1_c0 {
		position: relative;
	}

	.MyPortrayal_fd1_1 {
		background: linear-gradient(180deg, #CEE0FF 0%, #FFFFFF 86%, #FFFFFF 100%);
		;
		padding: 47rpx;
		margin: 24rpx 0rpx 32rpx 0rpx;
		border-radius: 25rpx;
		background-size: 100% auto;
	}

	.MyPortrayal_fd1_0_c1_c1 {
		width: 12rpx;
		height: 20rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin: 0rpx 0rpx 0rpx 16rpx;
	}

	.MyPortrayal_fd1_0_c1_c0 {
		color: rgba(153, 153, 153, 1);
		font-size: 28rpx;
		line-height: 28rpx;
		font-weight: 400;
	}

	.MyPortrayal_fd1_0_c0_c1 {
		color: #333;
		font-size: 32rpx;
		font-weight: 500;
		line-height: 48rpx;
		margin: 0rpx 0rpx 0rpx 10rpx;
	}

	.MyPortrayal_fd1_0_c0_c0 {
		background: rgba(20, 94, 253, 1);
		width: 10rpx;
		height: 30rpx;
		margin: 0rpx 10rpx 0rpx 10rpx;
		transform: scaleX(0.5);
	}

	.MyPortrayal_fd2_0_c0_c1 {
		background: rgba(20, 94, 253, .1);
		border-radius: 33rpx 33rpx 33rpx 33rpx;
		width: 96rpx;
		line-height: 48rpx;
		font-size: 24rpx;
		color: rgba(20, 94, 253, 1);
	}

	.MyPortrayal_fd2_0_c0_c0_c1 {
		color: #333;
		font-size: 28rpx;
		font-weight: 500;
		line-height: 40rpx;
	}

	.MyPortrayal_fd2_0_c0_c0_c0 {
		width: 40rpx;
		height: 40rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin: 0rpx 016rpx 0rpx 0rpx;
	}

	.MyPortrayal_fd2_0_c0 {
		background: var(--benbenbgColor1);
		padding: 32rpx 24rpx 024rpx 24rpx;
		margin: 0rpx 24rpx 24rpx 24rpx;
		border-radius: 32rpx;
		background-size: 100% auto;
		height: 104rpx;
	}

	.MyPortrayal_fd3_0_c0_c1_c1_c1 {
		color: rgba(153, 153, 153, 1);
		font-size: 24rpx;
		margin: 0rpx 5rpx 0rpx 3rpx;
	}

	.MyPortrayal_fd3_0_c0_c1_c1_c0 {
		color: rgba(153, 153, 153, 1);
		font-size: 24rpx;
	}

	.MyPortrayal_fd3_0_c0_c1_c0 {
		// margin: 16rpx 0rpx 16rpx 0rpx;
		color: rgba(51, 51, 51, 1);
		font-size: 28rpx;
		font-weight: 500;
		line-height: 40rpx;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.MyPortrayal_fd3_0_c0_c1 {
		width: 100%;
		padding:24rpx;
	}

	.MyPortrayal_fd3_0_c0_c0 {
		width: 100%;
		
		margin: 0;
		height: 191rpx;
		border-radius: 16rpx 16rpx  0 0 ;
	}

	.MyPortrayal_fd3_0_c0 {
		background: #f7faff;
		width: 339rpx;
		 height:280rpx;
		border-radius: 16rpx;
		background-size: 100% auto;
		margin: 0rpx 0rpx 24rpx 0rpx;
	}

	.MyPortrayal_fd3_0 {
		margin: 0rpx 24rpx 0rpx 24rpx;
	}

	//
	.MyPortrayal_fd1_4_ben {
		background: var(--benbenbgColor1);
		padding: 32rpx 0rpx 32rpx 0rpx;
		border-radius: 24rpx;
		background-size: 100% auto;
		margin: 0rpx 0rpx 24rpx 0rpx;
	}

	.MyPortrayal_fd1_4_c0_ben {
		width: 686rpx;
	}
</style>